<template>
	<div class="communication_main">
		<div class="mesg_tit">咨询类型</div>
		<div class="main_pdlr10">
			<el-form :inline="true" :model="SearchCommunicationForm" class="communicationFormMain">
		        <el-form-item label="类型名称">
		          <el-input v-model="SearchCommunicationForm.typename" placeholder="类型名称"></el-input>
		        </el-form-item>

		        <el-form-item label="状态">
		          <el-select v-model="statusVal" placeholder="全部">
		          	<el-option
									v-for="item in SearchCommunicationForm.status"
									:key="item.paramValue"
									:label="item.paramName"
									:value="item.paramValue">
								</el-option>
		          </el-select>
		        </el-form-item>

		        <el-form-item class="sear_btnbox">
		          <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
		          <el-button type="success" icon="el-icon-circle-plus-outline" @click='changeBtn'>添加</el-button>
		        </el-form-item>
	     	</el-form>

	      <el-table
	        :data="communicationTable"
	        stripe
	        border
	        style="width: 100%"
					v-loading="loading">
	        <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          prop="name"
	          label="类型名称"
	          width="120">
	        </el-table-column>
	         <el-table-column
	          prop="statusName"
	          label="状态"
	          width="50">
	        </el-table-column>
	       <el-table-column
	          prop="desc"
	          label="类型描述">
	        </el-table-column>
	        
	        <el-table-column
	          fixed='right'
	          width="130"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
	              <el-button
	                size="mini"
	                @click="changeBtn(scope.$index, scope.row)">编辑</el-button>
	              <el-button
	              	type="warning"
	                size="mini"
	                @click="switchBtn(scope.$index, scope.row)">启用/停用</el-button>
	             
	            </template>
	        </el-table-column>
	      </el-table>

	      
	      <div class="block">
	        <el-pagination
		        @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page.sync="currentPageCommunication"
		        :page-sizes="[5, 10, 20, 30]"
		        :page-size="pageSizeCommunication"
		        layout="sizes, prev, pager, next"
		        :total="totalCommunication">
	        </el-pagination>
	      </div>
	  </div>
	  <!-- gm弹框内容gm -->
	  <!-- gm添加业务支持gm -->
    <el-dialog :title="title" 
							 :visible.sync="dialogCommunication" 
							 center 
							 width="600px" 
							 :close-on-click-modal="false" 
							 :show-close="false">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="类型名称">
          <el-input key="typename" type="text" v-model="editForm.typename" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="类型描述">
          <el-input  
          :rows="4"
          type="textarea"
					placeholder="请输入内容"
					v-model="editForm.desc"
          key="desc" 
          autocomplete="off"
          ></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCommunication = false">取 消</el-button>
        <el-button type="primary" @click="okBtn">确 定</el-button>
      </div>
    </el-dialog>

    <!-- gm是否启用gm -->
    <el-dialog title="是否启用" 
							 :visible.sync="dialogStart" 
							 center 
							 width="400px" 
							 :close-on-click-modal="false"
							 :show-close="false">
      <el-form  label-width="100px">
        <el-form-item label="是否启用坐席" >
           <el-radio-group v-model="switchLabel">
              <el-radio :label="true">启用</el-radio>
              <el-radio :label="false">停用</el-radio>
           </el-radio-group>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStart = false">取 消</el-button>
        <el-button type="primary" @click="okSwitchBtn">确 定</el-button>
      </div>
    </el-dialog>


	</div>
</template>
<script>
import bus from '@/api/bus'
import { 
	getCommunicationTypes, 
	saveCommunicationType, 
	updateCommunicationType, 
	startStopState } from '@/api'
  
  export default {
    data() {
      return {
      	roleId:'',
      	sureAdd:0,//判断新增还是编辑的开关
      	dialogCommunication: false,//编辑弹出层
      	dialogStart: false,//启用弹出层
       	SearchCommunicationForm: {//查询条件
          typename: '',
          status: []
				},
				statusVal: '',//状态编号
        communicationTable:[],//查询表格
        editForm: {//编辑弹框form数据
        	typename:"",
        	desc:""
        },
        switchLabel:true,//启停用开关状态
        totalCommunication: null,// 分页总条数
        pageSizeCommunication:10, //当前分页一页多少条数
        currentPageCommunication:1,//当前页数
				switchlabel:true,//启停用开关状态
				loading: true,
				title: ''
      };
    },
		created(){//初次数据的显示
			let dictionaryValue = JSON.parse(sessionStorage.getItem('dictionaryValue'))
      dictionaryValue.map((item, index) => {
        if(item.typeValue == 'user_type') {
          this.SearchCommunicationForm.status = item.paramParamList
        }
      })
    	let params={
    		query: this.SearchCommunicationForm.typename,
    		status: this.statusVal,
				page: this.currentPageCommunication,
				size: this.pageSizeCommunication
    	}
    	this.searchTable(params);
		},
    methods:{
      searchTable (params) {//调入查询接口
				getCommunicationTypes (params).then(res => {
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.totalCommunication = data.pageInfo.total
						this.communicationTable = data.list;
						this.loading = false
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				});
	  	},
			searchBtn (){ //查询按钮事件
				if (this.loading) {
					return
				}
				this.loading = true
				let params={
					query: this.SearchCommunicationForm.typename,
					status: this.statusVal,
					page: this.currentPageCommunication,
					size: this.pageSizeCommunication
				}
				this.searchTable(params);
			},
			changeBtn (index,row){//点击新增，编辑按钮
				this.dialogCommunication = true;
				if(row){ //有row是编辑按钮点击进入的
					this.editForm.id = row.id;
					this.editForm.typename = row.name;
					this.editForm.desc = row.desc;
					// this.editForm.status = row.status;
					this.sureAdd = 1;
					this.title = '编辑沟通类型'
				}else{ //没有row是新增按钮点击进入的
					this.editForm.typename = "";
					this.editForm.desc = "";
					this.sureAdd = 0;
					this.title = '添加沟通类型'
				}
			},
			okBtn (){//点击确定按钮中新增和编辑两种情况的判断
				this.currentPageCommunication = 1
				this.pageSizeCommunication = 10
				if(this.sureAdd ==1){//编辑执行保存确定
						let params = {
							id:this.editForm.id,
							name:this.editForm.typename,
							desc:this.editForm.desc,
							// status:this.editForm.status,
							page: this.currentPageCommunication,
							size: this.pageSizeCommunication
						}
					  this.updateCommunicationType(params)
				} else if (this.sureAdd ==0){//新增执行保存确定
					let params = {
						name:this.editForm.typename,
						desc:this.editForm.desc,
						page: this.currentPageCommunication,
						size: this.pageSizeCommunication
					}
					this.saveCommunicationType(params)
				}
			},
			switchBtn(index,row){//点击启停用按钮
				this.dialogStart = true;
				this.id=row.id;
				this.switchLabel=(row.status==0) ? true : false;
			},
			okSwitchBtn(){//点击启停用按钮确定
				let params={
					id:this.id,
					state:(this.switchLabel == false) ? 1 : 0,
					type:'COMMUNICATE',
					page: this.currentPageCommunication,
					size: this.pageSizeCommunication
				}
				this.startStopState(params)
			},
			//停启
			startStopState(params) {
				startStopState (params).then(res => {//调入启停用开关
					let code = res.data.code;
					if(code == 0){
						let params={
							query:this.SearchCommunicationForm.typename,
							status:this.statusVal,
							page: this.currentPageCommunication,
							size: this.pageSizeCommunication
						}
						this.searchTable(params);//启停用执行之后刷新数据
						this.dialogStart = false;
					}else if(code == 1){
						this.$message({
							message:res.data.msg
						});
						this.dialogStart = true;
					}
				})
			},
			//添加
			saveCommunicationType(params){
				saveCommunicationType(params).then(res => {
					let code = res.data.code;//通过code判断是否有数据
					if(code == 0) {
						let params = {//查询的传人参数
							query: this.SearchCommunicationForm.typename,
							status:this.statusVal,
							page: this.currentPageCommunication,
							size: this.pageSizeCommunication
						}
						this.searchTable(params);//新增之后调用查询
						this.dialogCommunication = false;
					} else if(code == 1) {
						this.$message({
							message: res.data.msg
						});
						this.dialogCommunication = true;
					}
				});
			},
			// 编辑
			updateCommunicationType(params) {
				updateCommunicationType(params).then(res => {
					let code = res.data.code;//通过code判断是否有数据
					if(code == 0) {
						let params = {//查询的传人参数
							query:this.SearchCommunicationForm.typename,
							status:this.statusVal,
							page: this.currentPageCommunication,
							size: this.pageSizeCommunication
						}
						this.searchTable(params);//新增之后调用查询
						this.dialogCommunication = false;
					} else if(code == 1) {
						this.$message({
							message: res.data.msg
						})
						this.dialogCommunication = true;
					}
				})
			},
			handleSizeChange (val) { //改变每页的条数
				this.pageSizeCommunication = val;
				this.currentPageCommunication = 1
				let params = {
					query: this.SearchCommunicationForm.typename,
					status: this.statusVal,
					page: this.currentPageCommunication,
					size: this.pageSizeCommunication
				}
				this.searchTable(params);//调用查询接口
			},
			handleCurrentChange (val) { //改变当前页
			  this.currentPageCommunication = val
				let params = {
					query: this.SearchCommunicationForm.typename,
					status: this.statusVal,
					page: this.currentPageCommunication,
					size: this.pageSizeCommunication
				}
				this.searchTable(params);//调用查询接口
			},
		}
	};
</script>
<style scoped>

</style>